<template>
  <el-row :gutter="20">
    <!-- 统计数据 -->
    <CardItem>
      <template #icon
        ><el-icon> <Promotion /> </el-icon
      ></template>
      <template #title>动态数量</template>
      <template #count>{{ HomeData[1].talkAll }}</template>
    </CardItem>
    <CardItem>
      <template #icon
        ><el-icon> <ChatLineSquare /> </el-icon
      ></template>
      <template #title>评论数量</template>
      <template #count>{{ HomeData[2].comment }}</template>
    </CardItem>
    <CardItem>
      <template #icon
        ><el-icon> <ChatLineRound /> </el-icon
      ></template>
      <template #title>留言数量</template>
      <template #count>{{ HomeData[3].message }}</template>
    </CardItem>
    <CardItem>
      <template #icon
        ><el-icon> <User /> </el-icon
      ></template>
      <template #title>用户数量</template>
      <template #count>{{ HomeData[4].user }}</template>
    </CardItem>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Promotion,
  ChatLineSquare,
  ChatLineRound,
  User,
} from '@element-plus/icons-vue'

import { defineAsyncComponent } from 'vue'

const CardItem = defineAsyncComponent(() => import('./CardItme.vue'))
defineProps<{
  HomeData: any[]
}>()
</script>
